<template>
      <div id="ys">
            <div class="title">刷脸支付产品优势</div>
            <div class="icon-group">
                  <div class="item" v-for="(item, index) in iconData" :key="index">
                        <img :src="item.icon" alt="">
                        <div class="name">{{ item.name }}</div>
                  </div>
            </div>
            <div class="content">
                  <div class="subtitle">
                        运用场景
                  </div>
                  <div class="group">
                        <div class="gitem" v-for="(item, index ) in listData" :key="index" >
                              <div class="bg">
                                    <img :src="item.cj" alt="">
                              </div>
                              <div class="info">
                                    <img :src="item.cjj" alt="">
                                    <div class="name">{{ item.name }}</div>
                              </div>
                        </div>
                  </div>
            </div>
      </div>
</template>

<script>
      export default {
            data() {
                  return {
                        iconData: [
                              {
                                    icon: require("../../assets/img/yy1.png"),
                                    name: "支付+营销"
                              },
                              {
                                    icon: require("../../assets/img/yy2.png"),
                                    name: "提升顾客体验"
                              },
                              {
                                    icon: require("../../assets/img/yy3.png"),
                                    name: "提升收银效率"
                              },
                              {
                                    icon: require("../../assets/img/yy4.png"),
                                    name: "降低人工成本"
                              },
                              {
                                    icon: require("../../assets/img/yy5.png"),
                                    name: "会员"
                              },
                              {
                                    icon: require("../../assets/img/yy6.png"),
                                    name: "广告投放"
                              },
                        ],
                        listData: [
                              {
                                    cj: require("../../assets/img/cj1.png"),
                                    cjj: require("../../assets/img/cjj1.png"),
                                    name: "酒店"
                              },
                              {
                                    cj: require("../../assets/img/cj2.png"),
                                    cjj: require("../../assets/img/cjj2.png"),
                                    name: "餐厅"
                              },
                              {
                                    cj: require("../../assets/img/cj3.png"),
                                    cjj: require("../../assets/img/cjj3.png"),
                                    name: "商场"
                              },
                              {
                                    cj: require("../../assets/img/cj4.png"),
                                    cjj: require("../../assets/img/cjj4.png"),
                                    name: "医院"
                              },
                        ]
                  }
            },
      }
</script>

<style lang="scss" scoped>
#ys {
      width: 100%;
      margin: 30px auto;
      .title {
            font-size: 30px;
            line-height: 100px;
            text-align: center;
            width: 100%;
            height: 200px;
            background-color: #eeeeee;
      }
      .icon-group {
            width: 1080px;
            margin: 0 auto;
            transform: translateY(-100px);
            display: flex;
            flex-wrap: wrap;
            box-shadow: 0px 0px 4px rgba(0,0,0,.5);
            background-color: #fff;
            .item {
                  width: 33%;
                  text-align: center;
                  margin: 20px 0;
                  
                  padding: 20px 0;
                  
            }
      }
      .content {
            width: 1100px;
            margin: 30px auto;
            
            .subtitle {
                  font-size: 30px;
                  text-align: center;
            }
            .group {
                  position: relative;
                  left: 0;
                  top: 0;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin: 30px 0;
                  .gitem {
                        width: 260px;
                        height: 260px;
                        display: flex;
                        position: relative;
                        left: 0;
                        top: 0;
                        color: #fff;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        text-align: center;
                        .bg {
                              position: absolute;
                              left: 0;
                              top: 0;
                              z-index: -1;
                        }
                  }
            }
      }
}
</style>